<template>
  <div>
    <my-header :title="'我的收藏'"></my-header>
    <my-list :list="movieList" class="movie-list"/>
    <top :show="topShow"/>
  </div>
</template>
<script>
import MyHeader from 'common/header/Header'
import MyList from 'common/List'
import axios from 'axios'
import Top from 'common/Top'
export default {
  name: 'MyMovie',
  components: {
    MyHeader,
    MyList,
    Top
  },
  data () {
    return {
      movieList: [],
      topShow: false
    }
  },
  methods: {
    getMyLove () {
      axios.get('/api/usr/myLove').then(this.getLoveSucc)
    },
    getLoveSucc (res) {
      res = res.data
      this.movieList = res.data
    },
    handleScroll () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > 20) {
        this.topShow = true
      } else {
        this.topShow = false
      }
    }
  },
  mounted () {
    this.getMyLove()
    window.addEventListener('scroll', this.handleScroll)
  },
  destroyed () {
    window.removeEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="stylus" scoped>
  .movie-list
    margin-top: .6rem
</style>
